<template>
	<div class="step-progress-wrap">
		<div class="step-progress-title">{{ t('stepProgress.title') }}</div>
		<div class="step-progress">
			<div
				class="step-item"
				v-for="(step, idx) in steps"
				:key="step.label"
				:style="itemStyle"
			>
				<img
					class="step-icon"
					:src="getStepIcon(step.label, idx <= current)"
					:alt="step.label"
				/>
				<div class="step-bottom-row">
					<div
						class="step-bottom-inner"
						:style="{
							marginLeft: idx < steps.length - 1 ? '3px' : '0',
						}"
					>
						<div
							class="step-label"
							:class="{ active: idx <= current }"
						>
							{{ t(step.label) }}
						</div>
						<template v-if="idx < steps.length - 1">
							<van-icon
								class="step-arrow"
								name="arrow"
								:style="{
									color: idx < current ? '#000' : '#7D7D7D',
								}"
							/>
						</template>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Icon } from 'vant'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps<{
	steps: { label: string }[]
	current: number // 当前步骤索引，从0开始
}>()

// 步骤图片路径自动拼接
function getStepIcon(label: string, isOn: boolean) {
	// label: "stepProgress.installDesc" => "anzhuangshuoming"
	const pinyinMap: Record<string, string> = {
		'stepProgress.installDesc': 'anzhuangshuoming',
		'stepProgress.basicInfo': 'jibenxinxi',
		'stepProgress.installPosition': 'anzhuangweizhi',
		'stepProgress.circuitInfo': 'dianluxinxi',
		'stepProgress.finish': 'yuyuewanchang',
		// 安装说明: 'anzhuangshuoming',
		// 基本信息: 'jibenxinxi',
		// 安装位置: 'anzhuangweizhi',
		// 电路信息: 'dianluxinxi',
		// 预约完成: 'yuyuewanchang',
	}
	const key = pinyinMap[label] || label
	let url = new URL(
		`../assets/home/icon-${key}-${isOn ? 'on' : 'off'}.png`,
		import.meta.url
	).href
	console.log('图片url', url, key)
	return url
}

// 步骤平分宽度
const itemStyle = computed(() => ({
	width: `calc(${100 / props.steps.length}% - 2px)`,
}))
</script>

<script lang="ts">
export default {
	name: 'StepProgress',
}
</script>

<style scoped>
.step-progress-wrap {
	width: 100%;
}
.step-progress-title {
	color: #000;
	text-align: left;
	font-family: 'PingFang SC', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.3px;
	margin-bottom: 10px;
	margin-left: 17px;
}
.step-progress {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	padding: 0 8px;
	box-sizing: border-box;
}
.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}
.step-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 4px;
	display: block;
}
.step-bottom-row {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	width: 100%;
}
.step-bottom-inner {
	display: flex;
	align-items: center;
	height: 24px;
	justify-content: center;
	width: 100%;
}
.step-label {
	font-size: 10px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 600;
	color: #7d7d7d;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 0;
	max-width: 60px;
	word-break: keep-all;
	vertical-align: middle;
}
.step-label.active {
	color: #000;
}
.step-arrow {
	font-size: 16px;
	margin: 0 0 0 4px;
	vertical-align: middle;
}
</style>
